﻿<!doctype html>
<html>
<head>
    <title>SpreadJS - Filter Button Visible</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    
    <link href="../../../external/spreadjs/css/gcspread.sheets.excel2013white.9.40.20161.0.css" rel="stylesheet" type="text/css" />

    <script src="../../../external/external/jquery-1.8.2.min.js" type="text/javascript"></script>

    <script type="text/javascript" src="../../../external/spreadjs/gcspread.sheets.all.9.40.20161.0.min.js"></script>

    <script id="scriptInit" type="text/javascript">
        /*code_begin*/
        var spreadNS = GcSpread.Sheets;

        var salesData = [
                ["SalesPers", "Region", "SaleAmt", "ComPct", "ComAmt"],
                ["Joe", "North", 260, 0.1, 26],
                ["Robert", "South", 660, 0.15, 99],
                ["Michelle", "East", 940, 0.15, 141],
                ["Erich", "West", 410, 0.12, 49.2],
                ["Dafna", "North", 800, 0.15, 120],
                ["Rob", "South", 900, 0.15, 135]];

        $(document).ready(function () {
            var spread = new GcSpread.Sheets.Spread(document.getElementById("ss"));
            initSpread(spread);
        });

        function initSpread(spread) {
            var sheet = spread.getSheet(0);
            sheet.isPaintSuspended(true);
            sheet.allowCellOverflow(true);
            sheet.setName("HideRowFilter");

            // set cells value
            sheet.setArray(2, 1, salesData);

            var filter = new spreadNS.HideRowFilter(new spreadNS.Range(3, 1, salesData.length - 1, salesData[0].length));
            sheet.rowFilter(filter);

            prepareFilterItems(sheet, salesData[0]);

            sheet.setColumnWidth(1, 100);
            sheet.setColumnWidth(2, 80);
            sheet.setColumnWidth(3, 80);
            sheet.setColumnWidth(4, 80);
            sheet.setColumnWidth(5, 80);
            sheet.getCells(3, 3, 9, 3).formatter("$#,###,###");
            sheet.getCells(3, 4, 9, 4).formatter("0%");
            sheet.getCells(3, 5, 9, 5).formatter("$0.00");

            sheet.isPaintSuspended(false);

            $("#showAll").click(function () {
                if (filter) {
                    filter.filterButtonVisible(true);
                    $("#tableColumnsContainer input[type='checkbox']").prop("checked", true);
                }

            });
            $("#hideAll").click(function () {
                if (filter) {
                    filter.filterButtonVisible(false);
                    $("#tableColumnsContainer input[type='checkbox']").prop("checked", false);
                }
            });
        }

        function prepareFilterItems(sheet, headers) {
            var container = $("#tableColumnsContainer"),
                items = [];

            var filter = sheet.rowFilter(),
                range = filter.range,
                startColumn = range.col;

            for (var c = 0, length = headers.length; c < length; c++) {
                var name = headers[c];

                items.push('<input type="checkbox" checked id="@"><label for="@">'.replace(/@/g, (startColumn + c) + '_' + name) + name + '</label>');
            }

            $("#tableColumnsContainer").html(items.join(""));
            $("#tableColumnsContainer input").css("marginRight", "6px");
            $("#tableColumnsContainer label").css("marginRight", "20px");
            $("#tableColumnsContainer input[type='checkbox']").change(function () {
                var id = this.id, checked = this.checked,
                    index = +id.substr(0, id.indexOf("_"));

                if (filter) {
                    filter.filterButtonVisible(index, checked);
                }
            });
        }
        /*code_end*/
    </script>

</head>
<body>
<div class="sample-turtorial">
    <div id="ss" style="width:100%; height:340px;border: 1px solid gray;"></div>
    <div class="demo-options">
        <div class="option-row">
            <input id="showAll" type="button" value="Show All" title="Show all filter buttons of the table" />
            <input id="hideAll" type="button" value="Hide All" title="Hide all filter buttons of the table" />
        </div>
        <div class="option-row">
            <div>
                <label style="margin-right:20px;">Show filter buttons: </label>
            </div>
            <div id="tableColumnsContainer">
                
            </div>
        </div>
    </div>
</div>
</body>
</html>
